import React, { useEffect, useRef, useState } from 'react';
import { Drawer } from '@ss/mtd-react';
import { Form, Table, Tag, Loading } from '@block/plug';
import { $fetch } from '@block/utils';
import { RiskLevel } from '@src/utils';
import { ParkerRichText } from '@src/components';
import { CompleteTimePicker, EmpSelect } from '@src/aud-sys-component';
import { ReportPreview, AuditProblemListType, FindingsDrawerData, BusinessFeedbackList } from '../../type';
import Url from '../../url';
import './FindingsDrawer.scss';

interface Props {
  onClose: () => void;
  reportData?: ReportPreview;
  findingsRowData?: AuditProblemListType;
}

/**
 * 审计发现侧滑框
 */

const FindingsDrawer = (props: Props) => {
  const { onClose, reportData, findingsRowData } = props;

  const [drawerList, setDrawerList] = useState(null);
  const [loading, setLoading] = useState<boolean>(true);

  const formRef = useRef<Form>();

  const handleDrawerData = async () => {
    setLoading(true);
    try {
      const res = await $fetch<FindingsDrawerData>(Url.getPreviewProblemDetail, {
        problemId: findingsRowData?.problemId,
        tenantId: reportData?.tenantId,
        itemNo: reportData?.itemNo,
      });
      formRef.current?.setAllFieldsValue(res);
      setDrawerList(res);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    handleDrawerData();
  }, []);

  /** 审计发现&风险等级判定 */
  const renderRiskLevel = (riskLevel: string, riskLevelName: string) => {
    switch (riskLevel) {
      case RiskLevel.high:
        return (
          <>
            审计发现{findingsRowData?.indexCode}
            <Tag theme="red">{riskLevelName}</Tag>
          </>
        );
      case RiskLevel.medium:
        return (
          <>
            审计发现{findingsRowData?.indexCode}
            <Tag theme="orange">{riskLevelName}</Tag>
          </>
        );
      case RiskLevel.low:
        return (
          <>
            审计发现{findingsRowData?.indexCode}
            <Tag theme="green">{riskLevelName}</Tag>
          </>
        );
      default:
        return <>审计发现{findingsRowData?.indexCode}</>;
    }
  };

  return (
    <Drawer
      visible
      className="findings-drawer"
      title={renderRiskLevel(drawerList?.riskLevel, drawerList?.riskLevelName)}
      width={800}
      onClose={onClose}
    >
      <Loading loading={loading}>
        <Form ref={formRef} className="findings-drawer-form">
          <Form.Item formItemKey="title" label="标题：">
            <span toFormItem />
          </Form.Item>
          <Form.Item formItemKey="problemDescAndRiskAnalyze" label="问题描述及风险分析：">
            <ParkerRichText toFormItem mode="view" />
          </Form.Item>
          <Form.Item formItemKey="auditRecommend" label="审计建议：">
            <span toFormItem />
          </Form.Item>
          <Form.Item formItemKey="businessFeedbackList" label="业务方反馈：">
            <Table rowKey="feedbackId" scroll={{ x: 615 }} bordered="cell" data={drawerList?.businessFeedbackList}>
              <Table.Column width="55px" dataKey="num" render={(value, row, column, { index }) => index + 1}>
                编号
              </Table.Column>
              <Table.Column width="250px" dataKey="rectifyContent" render={(value) => value ?? '-'}>
                改进工作具体内容
              </Table.Column>
              <Table.Column
                dataKey="personInChargeOfTheRectify"
                width="200px"
                render={(value) => <EmpSelect lineBreak value={value} mode="view" />}
              >
                改进负责人
              </Table.Column>
              <Table.Column
                dataKey="planCompleteTime"
                width="110px"
                render={(value: number, row: BusinessFeedbackList) => (
                  <CompleteTimePicker planCompleteTime={value} rectifyCompletion={row?.rectifyCompletion} mode="view" />
                )}
              >
                预计完成时间
              </Table.Column>
            </Table>
          </Form.Item>
        </Form>
      </Loading>
    </Drawer>
  );
};
export default FindingsDrawer;
